<template>
  <div>
    <component :is="largeScreen" v-bind="$attrs" />
  </div>
</template>

<script setup name="DataScreen">
import * as Vue from 'vue'
import { loadModule } from 'vue3-sfc-loader/dist/vue3-sfc-loader.esm.js'
import { defineAsyncComponent, toRefs } from 'vue'

const props = defineProps({
  content: String,
  default: '<template></template>'
})

const { content } = toRefs(props)

const option = {
  moduleCache: {
    vue: Vue,
  },
  getFile: () => {
    return {
      getContentData: () => content.value,
      type: '.vue'
    }
  },
  addStyle(styleStr) {
    const style = document.createElement('style');
    style.textContent = styleStr;
    const ref = document.head.getElementsByTagName('style')[0] || null;
    document.head.insertBefore(style, ref);
  },
}

/** 初始化 */
const largeScreen = defineAsyncComponent(() => loadModule('/test.vue', option))

</script>

<style lang='scss' scoped></style>
